#root {
  width: 100%;
  height: 100%;
  padding: 0 32px;
  overflow-y: scroll;
  padding-top: calc(constant(safe-area-inset-top) + 16px);
  padding-top: calc(env(safe-area-inset-top) + 16px);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

// 溢出显示省略号
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis-multi {
  display: -webkit-box;
  /* 作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical;
  /* 设置伸缩盒子的子元素排列方式为纵向排列 */
  -webkit-line-clamp: 3;
  /* 显示的行数 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 溢出部分显示省略号 */
  width: 200px;
  /* 设置宽度，确保能看到效果 */
}

// ============================== 过场动画
.slide-left {
  animation: slideLeft 300ms ease-out;
}

@keyframes slideLeft {
  0% {
    transform: translate3d(100vw, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}
